<template>
  <div class="page group-detail">
    <van-nav-bar class="topnavbar" title left-text left-arrow @click-left="onClickLeft" />
    <div class="container">
      <van-swipe class="goods-swipe" :autoplay="3000">
        <van-swipe-item v-for="thumb in images" :key="thumb.id">
          <img :src="thumb.image" />
        </van-swipe-item>
      </van-swipe>

      <van-cell-group>
        <van-cell>
          <div class="goods-title">{{ product.title }}</div>
          <div class="goods-price">{{ formatPrice(product.price) }}</div>
        </van-cell>
        <van-cell class="goods-express">
          <van-col span="10">运费：{{ postage }}</van-col>
          <van-col span="14">剩余：{{ product.storage }}</van-col>
        </van-cell>
      </van-cell-group>

      <van-cell-group v-if="hasProp" class="goods-cell-group">
        <van-cell title="商品属性" is-link @click="showProp = true" />
      </van-cell-group>
      <van-panel class="margin-top" title="商品详情"></van-panel>
      <div v-if="product.content" class="html-content" v-html="product.content"></div>
      <div v-else class="empty-box">暂无介绍~</div>
    </div>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" @click="sorry">客服</van-goods-action-icon>
      <van-goods-action-button type="danger" @click="joinGroupbuy">立即参团</van-goods-action-button>
      <van-goods-action-button v-if="member.is_agent > 1" type="danger" @click="openGroupbuy">立即开团</van-goods-action-button>
    </van-goods-action>

    <van-popup v-model="showProp" closeable position="bottom">
      <van-cell-group>
        <van-cell v-for="(val, key) in product.prop_data" :key="key" :title="key" :value="val" />
      </van-cell-group>
    </van-popup>
    <van-popup v-model="showOrders" closeable position="bottom">
      <div class="group-list">
        <van-loading v-if="!orders" size="24px">加载中...</van-loading>
        <div v-else-if="!orders.length" class="empty-box">暂时没有正在拼团</div>
        <div v-else class="pop-container">
          <van-cell-group>
            <van-cell v-for="order in orders" :key="order.order_id">
              <van-image slot="icon" class="user-avatar" width="30" height="30" fit="cover" round :src="order.avatar"></van-image>
              <div slot="title" >
                {{order.nickname?order.nickname:order.username }}的拼团
              </div>
              <span slot="label">还差 {{config.groupbuy_num - order.group_count}} 人</span>
              <div>
                <van-count-down :time="order.countDown" format="剩 DD天 HH:mm:ss" />
              </div>
              <van-button
                slot="right-icon"
                  round
                  size="small"
                  type="danger"
                  @click="joinGroupOrder(order.order_id)"
                >参团</van-button>
            </van-cell>
          </van-cell-group>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import utils from "../../utils";

export default {
  components: {},

  data() {
    return {
      id: 0,
      show: false,
      images: [],
      is_favourite: false,
      postage: "",
      product: {
        title: "",
        price: 0,
        express: "免运费",
        remain: 0
      },

      showProp: false,
      showOrders: false,
      orders: null
    };
  },
  computed: {
    member() {
      return this.$store.state.userinfo;
    },
    hasProp() {
      return (
        this.product.prop_data &&
        Object.values(this.product.prop_data).length > 0
      );
    },
    config() {
      return this.$store.state.config
    }
  },
  mounted() {
    let id = this.$route.params.id;
    if (!id) {
      this.$toast.fail("参数错误");
      this.$router.back();
    } else {
      this.id = id;
      this.loadData();
    }
    this.$store.dispatch("checkUserinfo");
  },
  methods: {
    loadData() {
      this.$api
        .post("groupbuy/view", {
          id: this.id
        })
        .then(res => {
          res.data.goods.image = utils.fixImageUrl(res.data.goods.image);

          this.postage = res.data.postage;
          res.data.goods.content = utils.parseHtml(res.data.goods.content);
          this.product = res.data.goods;
          //this.images = res.data.images
          this.is_favourite = res.data.is_favourite == 1;
          //this.skus = utils.fixListImage(res.data.skus)
          if (!res.data.images || res.data.images.length < 1) {
            this.images = [
              {
                id: 0,
                image: this.product.image
              }
            ];
          } else {
            this.images = utils.fixListImage(res.data.images);
          }
          this.$api.wxShare({
            title: this.product.title,
            desc: this.product.vice_title,
            imgUrl: this.product.image
          });
        })
        .catch(() => {
          this.$toast.fail("产品资料错误");
          this.$router.back();
        });
    },
    formatPrice() {
      return (Math.round(this.product.price * 100) * 0.01).toFixed(2);
    },
    onClickLeft() {
      this.$router.back();
    },
    onClickCart() {
      this.$router.push("index-cart");
    },
    openGroupbuy() {
      if (this.member.is_agent < 2) {
        this.$toast.fail("你还不是团长哟~");
        return false;
      }
      this.$router.push("/group/confirm?goods_id=" + this.product.id);
    },
    joinGroupbuy() {
      this.showOrders = true;
      if (!this.orders) {
        this.$api.post("groupbuy/orders", { id: this.id }).then(json => {
          if (json.code == 1) {
            let orders=utils.fixListImage(json.data.orders, "avatar")
            if(orders){
              this.orders = orders.map(item=>{
                item.countDown = (item.create_time+this.config.groupbuy_cycle*24*60*60)*1000 -new Date().getTime();
                return item
              });
            }
          }
        });
      }
    },
    joinGroupOrder(order_id) {
      this.$router.push(
        "/group/confirm?goods_id=" + this.product.id + "&group_id=" + order_id
      );
    },
    sorry() {
      this.$toast("功能未上线~");
    }
  }
};
</script>

<style lang="scss">
.group-detail {
  .topnavbar {
    background: transparent;
    position: fixed;
    .van-icon {
      color: #fff;
      text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.3);
    }
  }
  .group-list {
    padding: 30px 10px;
  }
}
.goods {
  padding-bottom: 50px;

  &-swipe {
    img {
      width: 100%;
      display: block;
    }
  }

  &-title {
    font-size: 16px;
  }

  &-price {
    color: #f44;
    &:before {
      content: "¥";
      font-size: 12px;
    }
  }

  &-express {
    color: #999;
    font-size: 12px;
    padding: 5px 15px;
  }

  &-cell-group {
    margin: 15px 0;

    .van-cell__value {
      color: #999;
    }
  }

  &-tag {
    margin-left: 5px;
  }
}
.group-list{
  .van-cell{
    padding-left:0;
    padding-right:0;
  }
.user-avatar{
margin-right:5px;
}
.van-cell__value{
  padding-right:5px;
}
}
</style>
